<template>

  <div>

    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="success" @click="dialogFormVisible = true">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="60">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="namezh"
          label="角色拼音">
      </el-table-column>

      <el-table-column
          prop="created"
          label="日期">
      </el-table-column>


      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
     <el-button @click="openBindMenu(scope.row)" type="text" size="small">绑定菜单</el-button>
        </template>

      </el-table-column>

    </el-table>
    <!--绑定菜单对话框-->
    <el-dialog title="角色菜单" :visible.sync="dialogMenu">
      <el-tree
          ref="myTree"
          :data="treeData"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"

          :props="defaultProps"
          >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMenu = false">取 消</el-button>
        <el-button type="primary" @click="bindRoleMenu">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "RoleView",
  data() {
    return {
      tableData: [],
      queryForm: {
        name: ''
      },dialogMenu:false,
      defaultProps: {
        children: 'subMenuList',
        label: 'name'
      },treeData:[]//菜单数据
      ,checkedKeys:[]//当前角色拥有的菜单
      ,newCheckedKeys:[] //新选中的菜单id

      ,rid:'',
    }
  },
  methods: {

    list() {
      this.axios.get(this.$baseUrl + 'role/list').then(res => {
        this.tableData = res.data.data;
      })
    },openBindMenu(row){
     this.dialogMenu=true;
     this.getAllMenu();//获取所有菜单
      this.getMidsByRid(row.id);//获取当前角色拥有的菜单id
      this.rid =row.id
    },getAllMenu(){
      this.axios.get(this.$baseUrl+'menu/getAllMenu').then(res=>{
        this.treeData =res.data.data;
      })
    }, getMidsByRid: function (rid) {
    //  this.checkedKeys = []
      this.axios.get(this.$baseUrl + 'menu/getMidsByRid', {params: {rid: rid}}).then(res => {
    //    this.checkedKeys = res.data.data;
        res.data.data.forEach(id => {
         let node = this.$refs.myTree.getNode(id);//获取当前的节点
          if(node.isLeaf){//如果是叶子节点，则选中
           this.$refs.myTree.setChecked(node, true)
          }

        })
        //this.checkedKeys.forEach(id =>{this.$refs.myTree.setChecked(id, true)})

      })

    },bindRoleMenu(){
      //获取选中的菜单id this.$refs vue提供的对象
      this.newCheckedKeys=this.$refs.myTree.getCheckedKeys();
     this.newCheckedKeys.push(this.$refs.myTree.getHalfCheckedKeys()[0])//获取半选中的父节点
     console.log("==================>"+this.newCheckedKeys)

      //获取角色id
      this.axios.post(this.$baseUrl+'role/bindMenu',{id:this.rid,mids:this.newCheckedKeys}).then(res=>{
        if(res.data.msg){
          this.$message("绑定成功");
          this.dialogMenu=false;
        }
      })
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>
